import {v4 as uuidv4} from 'uuid';
import {EPoint} from "./EPoint.ts";
import {reactive} from "vue";
import {ComponentTypeOption} from "./ComponentTypeOption.ts";

export class ComponentOption {
    type: string = '';
    id: string = "";
    option: object = {};
    x: number = 0;
    y: number = 0;
    w: number = 0;
    h: number = 0;
    anchors: Array<ComponentAnchor> = reactive([]);
    selected: boolean = false
    hover: boolean = false
    zIndex: number = 0;
    //组件类型的配置项，这部分配置不会保存到组件中，每次创建组件的时候从组件类型配置中得到，不可修改其中的值
    typeOption: ComponentTypeOption = ComponentTypeOption.getDefault();

    constructor(_type: string, id: string | null | undefined, x: number, y: number, w: number, h: number, typeOption: ComponentTypeOption) {
        this.type = _type
        if (typeof id === 'undefined' || !id) {
            this.id = uuidv4();
        } else {
            this.id = id
        }
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        this.typeOption = typeOption;
    }

    addAnchor(px: number, py: number) {
        let anchor: ComponentAnchor = new ComponentAnchor(px, py, null, this.id);
        anchor.freshPoint(this)
        this.anchors.push(anchor)
    }

    addDefaultAnchors() {
        if (this.anchors.length < 1) {
            let anchor: ComponentAnchor;
            anchor = new ComponentAnchor(0.5, 0, null, this.id);
            // anchor.freshPoint(this)
            this.anchors.push(anchor)
            anchor = new ComponentAnchor(1, 0.5, null, this.id);
            // anchor.freshPoint(this)
            this.anchors.push(anchor)
            anchor = new ComponentAnchor(0.5, 1, null, this.id);
            // anchor.freshPoint(this)
            this.anchors.push(anchor)
            anchor = new ComponentAnchor(0, 0.5, null, this.id);
            // anchor.freshPoint(this)
            this.anchors.push(anchor)
            this.figure();
        }
    }

    figure() {
        for (let anchor of this.anchors) {
            if (typeof anchor.freshPoint === 'function') {
                anchor.freshPoint(this);
            }
        }
    }

    toJson(): any {
        return JSON.parse(JSON.stringify(this))
    }

    static fromJson(jsonCo: any, typeOption: ComponentTypeOption): ComponentOption {
        let type = jsonCo.type
        let id = jsonCo.id
        let x = jsonCo.x
        let y = jsonCo.y
        let w = jsonCo.w
        let h = jsonCo.h
        let co = new ComponentOption(type, id, x, y, w, h,typeOption);
        co.zIndex = jsonCo.zIndex
        co.option = jsonCo.option
        for (let jAnchor of jsonCo.anchors) {
            let ca = new ComponentAnchor(jAnchor.px, jAnchor.py, jAnchor.id, jAnchor.componentId)
            ca.freshPoint(co);
            co.anchors.push(ca)
        }
        return co;
    }
}

//连接线的锚点
export class ComponentAnchor {
    //都是百分比，最小0，最大1
    px: number = 0;
    py: number = 0;
    id: string = '';
    visiable: boolean = true;
    //锚点的位置
    point: EPoint;
    componentId: string;

    constructor(_x: number, _y: number, id: string | null, componentId: string) {
        this.px = _x
        this.py = _y
        if (id) {
            this.id = id;
        } else {
            this.id = uuidv4();
        }
        this.componentId = componentId;
        this.point = new EPoint(0, 0);
    }

    //锚点的位置以百分比表示，所以要转换成坐标
    freshPoint(componentOption: ComponentOption) {
        if (componentOption) {
            // this.point = new EPoint(this.componentOption.x + this.componentOption.w * this.px, this.componentOption.y + this.componentOption.h * this.py);
            this.point.x = componentOption.x + componentOption.w * this.px
            this.point.y = componentOption.y + componentOption.h * this.py
        }
    }
}
